import Vue from 'vue'//导入vue实例对象
import Router from 'vue-router'//导入路由类
import Culture from "../views/Culture";//导入文化组件
import Military from "../views/Military";//导入军事组件
import Recreation from "../views/Recreation";//导入娱乐组件
import Sports from "../views/Sports";
import Technology from "../views/Technology";
import Details from "../views/Details";

Vue.use(Router)//激活使用路由对象
const router = new Router({//创建的路由对象并导出
  routes: [
    {
      path: '/',
      redirect: '/culture'//设置首页重定向
    },
    {
      path: '/culture',
      name: 'Culture',
      component: Culture,
    },
    {
      path: '/military',
      name: 'Military',
      component: Military
    },
    {
      path: '/recreation',
      name: 'Recreation',
      component: Recreation
    },
    {
      path: '/sports',
      name: 'Sports',
      component: Sports
    },
    {
      path: '/technology',
      name: 'Technology',
      component: Technology
    },
    {
      path: '/details',
      name: 'Details',
      component: Details
    }
  ],
  mode: 'history',//将修改url的hash方式改为history模式，去除url中的#号锚点。
  linkActiveClass: 'active'//全部标签添加，同等于router-link标签中的active-class。
});


//前置钩子Hook（回调）制作全局导航守卫
router.beforeEach((to,from,next) => {//页面跳转时会回调这个方法
  console.log(to);
  document.title = to.matched[0].meta.title;//将路由中的属性赋值到title中
  next();//传参next把内部的guard重写，必须执行，不然无法跳转。
});

//后置钩子
router.afterEach((to,from) => {//跳转完成之后调用！
  console.log("页面跳转完成！");
})

export default router
